<%--
  Created by IntelliJ IDEA.
  User: carlst6
  Date: 3/9/12
  Time: 3:28 PM
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta name="layout" content="main"/>
  <title> - Listing Details</title>

    <r:require modules="jquery-ui"/>
</head>
<body>
    <h1>${listing.name?.encodeAsHTML()}</h1>
<g:if test="${listing?.endDate < new Date()}"><div><h3>Listing Expired</h3></div></g:if>
<g:else>
    <g:if test="${listing.description?.size() > 0}"><div>Description: ${listing.description?.encodeAsHTML()}</div></g:if>
    <div>Seller: <g:link controller="Customer" action="show" id="${listing.seller.id}">${listing.seller?.getNameFromEMail().encodeAsHTML()}</g:link></div>
    <div>Starting Bid:  <g:formatNumber number="${listing?.startingBidPrice}" type="currency" currencyCode="USD" /></div>
    <div>State: <g:if test="${listing.endDate < new Date()}">ENDED</g:if><g:else>OPEN</g:else></div>
    <div>Auction Duration: ${Math.round(listing?.endDate - listing?.startDate)} days</div>
    <div>Auction Started: <g:formatDate date="${listing?.startDate}" type="datetime" style="MEDIUM"/></div>
    <div>Auction Closes:  <g:formatDate date="${listing?.endDate}" type="datetime" style="MEDIUM"/></div>
    <div>Minimum Bid:  <span id="minBid"><g:formatNumber number="${listing?.minimumBid}" type="currency" currencyCode="USD" /></span></div>

<h3>Most Recent Bids</h3>
<table id="bidTable" class="data_table">
    <tr id="bidHeader"><th>User</th><th>Bid Time</th><th>Amount</th></tr>
</table>


<g:if test="${session.user}">
    <p></p>
    <h3>Place New Bid for this Listing</h3>
    <div id="bidMessage"></div>
    <g:if test="${listing.endDate < new Date()}">Bids cannot be placed for closed listings</g:if>
    <g:else>
        <g:if test="${flash.message}">
            <div id="bidStatus" class="message" role="status">${flash.message}</div>
        </g:if>
        <g:hasErrors bean="${bidInstance}">
            <ul class="errors" role="alert">
                <g:eachError bean="${bidInstance}" var="error">
                    <li <g:if test="${error in org.springframework.validation.FieldError}">data-field-id="${error.field}"</g:if>><g:message error="${error}"/></li>
                </g:eachError>
            </ul>
        </g:hasErrors>
        <form id="bidForm" action="something">
            <fieldset class="form">
                <g:render template="/bid/form" />
            </fieldset>
            <fieldset class="buttons">
                <input type="submit" name="create" value="${message(code: 'default.button.create.label', default: 'Create')}" />
            </fieldset>
        </form>
    </g:else>
</g:if>

<g:javascript>

    function setMinBid(newBid){$('#minBid').text(newBid);}

    function worker(){
        $.ajax({
            url: "${createLink(controller:'listing', action: 'getBidsForListing')}",
            async: true,
            method: 'GET',
            data: {id: ${listing.id}},
            dataType: 'json',
            success: function(bidInfo){

                $('#bidTable').find("tr:gt(0)").remove();
                for(i in bidInfo.bids){
                    var bid = bidInfo.bids[i];
                   $('#bidTable').append("<tr><td>" + bid.bidder + "</td><td>" + formatDate(new Date(bid.time)) + "</td><td>" + bid.amount + "</td></tr>");
                }
                setMinBid(bidInfo.minBid);

            },
            complete: function(){setTimeout("worker()", 5000);}
        });
    }

$(document).ready(function(){
    worker();

    $("#bidForm").submit(function(){
        var amount = $('#amount').val();
        $.ajax({
            url: "${createLink(controller:'bid', action: 'save')}",
            async: true,
            method: 'POST',
            data: {listingId: ${listing.id}, amount:amount},
            dataType: 'json',
            success: function(bid){
                if(bid.status){
                    setMinBid(bid.newMinimum);
                    var newBid = $("<tr><td>" + bid.bidder + "</td><td>" + formatDate(new Date(bid.time)) + "</td><td>" + bid.amount + "</td></tr>");
                    $('#bidHeader').after(newBid);
                    newBid.hide();
                    newBid.fadeIn(1500);

                    $('#amount').val("");
                }
                $('#bidMessage').text(bid.message);
            }
        });

       return false;
    });


});





</g:javascript>
</g:else>

</body>
</html>